<div class="p+" flex-container="row" flex-gutter="24" flex-wrap>
    <div flex-item="6">
        <span class="fs-title display-block mb">Text only</span>
 
        <div class="divider divider--dark"></div>
 
        <ul class="list mt++">
            <li class="list-row list-row--multi-line">
                <div class="list-row__content">
                    <span class="display-block">Two-line item</span>
                    <span class="display-block fs-body-1 tc-black-2">Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
                </div>
            </li>
            <li class="list-row list-row--multi-line">
                <div class="list-row__content">
                    <span class="display-block">Two-line item</span>
                    <span class="display-block fs-body-1 tc-black-2">Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
                </div>
            </li>
            <li class="list-row list-row--multi-line">
                <div class="list-row__content">
                    <span class="display-block">Two-line item</span>
                    <span class="display-block fs-body-1 tc-black-2">Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
                </div>
            </li>
        </ul>
    </div>
 
    <div flex-item="6">
        <span class="fs-title display-block mb">Icon with text</span>
 
        <div class="divider divider--dark"></div>
 
        <ul class="list mt++">
            <li class="list-row list-row--multi-line">
                <div class="list-row__primary">
                    <lx-icon lx-id="send" lx-size="s" lx-color="grey" lx-type="flat"></lx-icon>
                </div>
 
                <div class="list-row__content">
                    <span class="display-block">Two-line item</span>
                    <span class="display-block fs-body-1 tc-black-2">Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
                </div>
            </li>
            <li class="list-row list-row--multi-line">
                <div class="list-row__primary">
                     <lx-icon lx-id="pencil" lx-size="s" lx-color="grey" lx-type="flat"></lx-icon>
                </div>
 
                <div class="list-row__content">
                    <span class="display-block">Two-line item</span>
                    <span class="display-block fs-body-1 tc-black-2">Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
                </div>
            </li>
            <li class="list-row list-row--multi-line">
                <div class="list-row__primary">
                    <lx-icon lx-id="bell" lx-size="s" lx-color="grey" lx-type="flat"></lx-icon>
                </div>
 
                <div class="list-row__content">
                    <span class="display-block">Two-line item</span>
                    <span class="display-block fs-body-1 tc-black-2">Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
                </div>
            </li>
        </ul>
    </div>
 
    <div flex-item="6" class="mt++">
        <span class="fs-title display-block mb">Circled icon with text</span>
 
        <div class="divider divider--dark"></div>
 
        <ul class="list mt++">
            <li class="list-row list-row--multi-line list-row--has-separator">
                <div class="list-row__primary">
                    <lx-icon lx-id="folder" lx-size="l" lx-color="grey" lx-type="circled"></lx-icon>
                </div>
 
                <div class="list-row__content">
                    <span class="display-block">Two-line item</span>
                    <span class="display-block fs-body-1 tc-black-2">Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
                </div>
            </li>
            <li class="list-row list-row--multi-line list-row--has-separator">
                <div class="list-row__primary">
                    <lx-icon lx-id="file" lx-size="l" lx-color="blue" lx-type="circled"></lx-icon>
                </div>
 
                <div class="list-row__content">
                    <span class="display-block">Two-line item</span>
                    <span class="display-block fs-body-1 tc-black-2">Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
                </div>
            </li>
            <li class="list-row list-row--multi-line list-row--has-separator">
                <div class="list-row__primary">
                    <lx-icon lx-id="plus" lx-size="l" lx-color="green" lx-type="circled"></lx-icon>
                </div>
 
                <div class="list-row__content">
                    <span class="display-block">Two-line item</span>
                    <span class="display-block fs-body-1 tc-black-2">Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
                </div>
            </li>
        </ul>
    </div>
 
    <div flex-item="6" class="mt++">
        <span class="fs-title display-block mb">Avatar with text and icon</span>
 
        <div class="divider divider--dark"></div>
 
        <ul class="list mt++">
            <li class="list-row list-row--multi-line list-row--has-separator">
                <div class="list-row__primary">
                    <img src="/images/placeholder/1-square.jpg" width="40" height="40" class="img-round">
                </div>
 
                <div class="list-row__content">
                    <span class="display-block">Two-line item</span>
                    <span class="display-block fs-body-1 tc-black-2">Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
                </div>
 
                <div class="list-row__secondary">
                    <lx-icon lx-id="information" lx-size="xs" lx-color="grey" lx-type="flat"></lx-icon>
                </div>
            </li>
            <li class="list-row list-row--multi-line list-row--has-separator">
                <div class="list-row__primary">
                    <img src="/images/placeholder/2-square.jpg" width="40" height="40" class="img-round">
                </div>
 
                <div class="list-row__content">
                    <span class="display-block">Two-line item</span>
                    <span class="display-block fs-body-1 tc-black-2">Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
                </div>
 
                <div class="list-row__secondary">
                    <lx-icon lx-id="information" lx-size="xs" lx-color="grey" lx-type="flat"></lx-icon>
                </div>
            </li>
            <li class="list-row list-row--multi-line list-row--has-separator">
                <div class="list-row__primary">
                    <img src="/images/placeholder/3-square.jpg" width="40" height="40" class="img-round">
                </div>
 
                <div class="list-row__content">
                    <span class="display-block">Two-line item</span>
                    <span class="display-block fs-body-1 tc-black-2">Secondary text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
                </div>
 
                <div class="list-row__secondary">
                    <lx-icon lx-id="information" lx-size="xs" lx-color="grey" lx-type="flat"></lx-icon>
                </div>
            </li>
        </ul>
    </div>
</div>